.__color-selector-modal {
  display: none;
  position: absolute;
  width: 240px;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px #ccc;
  background: #fff;
  padding: 10px;
  z-index: 99;
}

.__modal-body {
  flex: 1;
  width: 100%;
  height: 120px;
  background-color: #fff;
}

.selector-direction {
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: #fff;
  transform: rotate(45deg);
  z-index: 100;
}

.color-selector {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  .color-selector-input {
    width: 100%; height: 28px; padding: 0 10px;
    border: 1px solid #666;
  }
  .color-selector-bar {
    position: absolute; right: 10px;
    width: 15px; height: 15px;
    border: 1px solid #ccc;
    cursor: pointer;
  }

  .color-selector-shaders-model {
    .__color-selector-modal;
    text-align: left;
    right: -15px;
    top: 25px;
    height: 260px;
    .selector-direction-right-top {
      top: -10px;
      right: 12px;
      border-left: 1px solid #ccc;
      border-top: 1px solid #ccc;
    }
  }
  .color-selector-header {
    position: relative;
    top: -5px;
    height: 18px;
    line-height: 18px;
  }
  .modal-body {
    .__modal-body;
  }
  .color-selector-canvas {
    width: 100%;
    height: 100%;
  }

  .color-selector-collapse {
    position: relative;
    width: 100%;
    height: 36px;
    .color-selector-collapse-header {
      display: flex;
      justify-content: space-between;
      border-top: 1px solid #ccc;
      height: 36px;
      line-height: 36px;
    }
  }

  .color-selector-preset {
    position: relative;
    display: grid;
    width: 100%;
    height:140px;

    grid-template-columns: repeat(11, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-gap: 5px;
    .color-preset {

    }
  }
  .color-selector-preset-modal,
  .color-selector-commonly-modal {
    .__color-selector-modal;
    height: 180px;
    right: calc(100% + 20px);
    bottom: calc(100% - 36px);
    .color-preset {
      position: relative;
      z-index: 999;

      color: hsl(200, 100%, 100%)
    }
  }
  .color-selector-preset-modal {

  }
  .color-selector-commonly-modal {
    display: none;
  }

  .selector-direction-right {
    .selector-direction;
    right: -8px;
    bottom: 10px;
  }

  .color-selector-commonly {
    position: relative;
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-gap: 5px;
    .color-preset {

    }
  }
}